Learn how to use Shiki to syntax highlight code and write your own transformers to customize the generated HTML.

🔴 Patreon: https://www.patreon.com/joyofcode
 𝕏 Twitter: https://twitter.com/joyofcodedev
💬 Discord: https://discord.com/invite/k6ZpwAKwwZ
🔥 Uses:  https://www.joyofcode.xyz/uses

🔗 Shiki: https://shiki.style/
🔗 Shiki Magic Move: https://shiki-magic-move.netlify.app/
🔗 The Evolution of Shiki: https://nuxt.com/blog/shiki-v1
🔗 VS Code Syntax Highlight Guide: https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide

🔖 Timestamps

0:00 Intro
0:08 What Is Shiki?
2:48 How to Set Up Shiki
3:45 Using Shiki For Syntax Highlighting
6:41 Creating A Custom Shiki Syntax Highlighter
8:09 Using Multiple Themes
10:52 Using Shiki To Syntax Highlight Code Blocks In Markdown
12:51 Shiki Fine-Grained Bundle
13:13 How To Add Line Highlighting And Line Numbers
16:39 Shiki Twoslash Integration
17:44 Using Shiki Decorations To Select Ranges Of Code
19:24 Creating Your Own Shiki Transformers
24:20 Outro

#joyofcode #shiki